<template>
  <div id="projectTeamDetails">
    <div class="projectTeam_title">
      <h3>{{groupDetail.deptGroupName}}</h3>
      <div class="form_item">
        <div>项目组编号：</div>
        <a-input style="width: 200px" disabled v-model="groupDetail.deptGroupCode" />
      </div>
      <div class="form_item">
        <div>温馨提示：</div>
        <span>项目组内人员将自动负责项目组内所有项目</span>
      </div>
    </div>
    <div class="projectTeam_content">
      <a-tabs default-active-key="1">
        <a-tab-pane key="1" tab="项目列表">
          <DataTable rowKey="code" :btns="btns1" :tableData="Data1" :tableColumn="tableColumn" :pageConfig="pageConfig1" @refresh="getRelProjectList"></DataTable>
        </a-tab-pane>
        <a-tab-pane key="2" tab="请购部门">
          <DataTable rowKey="deptGroupId" :btns="btns2" :tableData="Data2" :tableColumn="tableColumn2" :pageConfig="pageConfig2" @refresh="getRelDeptList"></DataTable>
        </a-tab-pane>
        <a-tab-pane key="3" tab="项目人员">
          <div>
            <a-button type="primary" @click="formMemberVisible = true" style="margin-right: 10px;">添加人员</a-button>
            <a-dropdown>
              <a-menu slot="overlay" @click="handleMenuClick">
                <a-menu-item key="1">角色配置</a-menu-item>
                <a-menu-item key="2">移除项目组</a-menu-item>
                <a-menu-item key="3">人员复制</a-menu-item>
              </a-menu>
              <a-button type="primary"> 批量操作 <a-icon type="down" /> </a-button>
            </a-dropdown>
          </div>
           <!-- :btns="btns3" -->
          <DataTable rowKey="memberId" :tableData="Data3" :rowSelection="{ selectedRowKeys: selectedRowKeysMember, onChange: onSelectChangeMember }" :tableColumn="tableColumn3" :pageConfig="pageConfig3" @refresh="getRelMemberList"></DataTable>
        </a-tab-pane>
      </a-tabs>
    </div>
    <a-modal title="添加人员" width="80%" :visible="formMemberVisible" @ok="confirmformMenber" @cancel="hideFormProjectMenber">
      <div class="dialog-wrap">
        <div class="dialog-left">
          <a-input-search style="margin-bottom: 8px" placeholder="请输入部门名称/编码" @change="onChange" />
          <a-tree :expanded-keys="expandedKeys" :auto-expand-parent="autoExpandParent" :tree-data="treeData" @expand="onExpand" :replaceFields="replaceFields" @select="selectTree"></a-tree>
          <div style="margin-top:20px">
            <a-pagination v-model="current" size="small" :total="treeTotal" @change="changeTreePage"/>
          </div>
        </div>
        <div class="dialog-right">
          <div class="flex">
            <a-input-search placeholder="用户名/手机号/用户编码" style="width: 300px" v-model="searchForm.searchValue" @search="searchBtn"/>
          </div>
          <DataTable rowKey="id" :showConfig="false" :rowSelection="{ selectedRowKeys: selectedRowKeys, onChange: onSelectChange }" :tableData="Data" :tableColumn="tableColumn4" :pageConfig="pageConfig4"></DataTable>
        </div>
      </div>
    </a-modal>
    <CommonDialog :rows="rowsProject" :labelCol="{span: 6}" :wrapperCol="{span: 18}" :form="formProject" title="添加项目" :visible="formProjectVisible" @hideDialog="hideFormProjectVisible" @confirm="confirmformProject">
      <template v-slot:detail>
        <div class="commonBlock">
          <template v-for="(item,index) in selectProjectList" v-key="index">
            <div class="commonBlock_item">{{item.ncProjectName}}<a-icon type="close-circle" style="position: absolute;top: -6px;right: -6px;" @click="delSelectProject(index)"/></div>
            <!-- closable -->
            <!-- <a-tag @close="(index)=>delSelectProject(item,index)" closable>{{item.ncProjectName}}</a-tag> -->
          </template>
        </div>
      </template>
    </CommonDialog>
    <CommonDialog :rows="rowsDept" :labelCol="{span: 6}" :wrapperCol="{span: 18}" :form="formDept" title="添加请购部门" :visible="formDeptVisible" @hideDialog="hideFormDeptVisible" @confirm="confirmformDept">
      <template v-slot:detail>
        <div class="commonBlock">
          <template v-for="(item,index) in selectDeptList" v-key="index">
            <div class="commonBlock_item">{{item.deptName}}<a-icon type="close-circle" style="position: absolute;top: -6px;right: -6px;" @click="delSelectdept(index)"/></div>
            <!-- closable -->
            <!-- <a-tag @close="()=>delSelectProject(item)">{{item.deptName}}</a-tag> -->
          </template>
        </div>
      </template>
    </CommonDialog>
    <!-- 批量移除项目组 -->
    <a-modal title="移除项目组" :visible="formBatchRemovee" @ok="confirmformDeleteRels" @cancel="formDeleteRelsVisible">
      <div>你选择的人员将被移出项目组，将自动删除账号中项目组项目，请购部门配置，确定移出项目组吗？</div>
    </a-modal>
    <!-- 批量配置角色 -->
    <CommonDialog :rows="rowsRole" :form="formRole" title="批量配置角色" :visible="formRoleVisible" @hideDialog="hideFormRoleVisible" @confirm="confirmformRole"/>
    <!-- 复制人员 -->
    <CommonDialog :rows="rowsCopy" :labelCol="{span: 6}" :wrapperCol="{span: 18}" :form="formCopy" title="人员复制到其他项目组" :visible="formCopyVisible" @hideDialog="hideFormCopyVisible" @confirm="confirmformCopy"/>

    <CommonDialog :rows="rows" :form="form" title="编辑项目" :visible="formVisible" @hideDialog="hideFormVisible" @confirm="confirmHandle()"/>
  </div>
</template>
<script lang='ts'>
import { Component, Watch, Vue } from 'vue-property-decorator'

@Component
export default class projectTeamDetails extends Vue {
  formVisible:boolean = false
  searchKey:any = ''
  searchValue:any = ''
  groupDetail:any = {}
  ncProjectList:any[] = []
  selectProjectList:any[] = []
  statusList:any[] = ['', '在建', '完工', '装修']
  deprGroupList:any[] = []
  Data1:any[] = []
  Data2:any[] = []
  Data3:any[] = []
  treeData: any[] = []
  selectedRowKeys: any[] = []
  selectedRowKeysMember:any[] = []
  replaceFields: any = {
    children: 'childs',
    title: 'name',
    key: 'id'
  }
  searchForm: any = {
    searchValue: '',
    date: [],
    status: undefined
  };
  form: any = {
    projectId: undefined,
    inuseStatus: undefined,
    areaId: undefined,
    areaName: ''
  };
  current:any = 1
  treeTotal:any = 0
  currentPage:any = 1
  memberorgList:any = [] // 请购组织列表
  memberDeptList:any = [] // 请购部门列表
  roleList:any[] = [] // 角色列表
  formProjectVisible:boolean = false
  formDeptVisible:boolean = false
  formMemberVisible:boolean = false
  formBatchRemovee:boolean = false
  formRoleVisible:any = false
  formCopyVisible:any = false
  word:any = ''
  autoExpandParent: boolean = true
  selectDeptList:any[] = []
  expandedKeys: any[] = []
  projectList:any[] =[]
  deptAreaList:any[] = []
  formProject:any = {
    relId: undefined
  }
  formDept:any = {
    relId: undefined
  }
  formRole:any = {
    ids: ''
  }
  formCopy:any = {
    deptGroupId: undefined,
    relType: 'MEMBER'
  }

  pageConfig1:any = {
    current: 1,
    total: 10,
    pageSize: 9999,
    onChange: this.changePage1
  }
  pageConfig2:any = {
    current: 1,
    total: 10,
    pageSize: 9999,
    onChange: this.changePage2
  }
  pageConfig3:any = {
    current: 1,
    total: 10,
    pageSize: 10,
    onChange: this.changePage3
  }
  pageConfig4:any = {
    current: 1,
    total: 10,
    pageSize: 10,
    onChange: this.changePage4
  }
  hideFormRoleVisible () {
    this.formRoleVisible = false
    this.formRole.ids = ''
  }
  get rows () {
    return {
      projectId: {
        label: '项目选择',
        el: 'select',
        placeholder: '请选择项目',
        options: this.projectList,
        callback: this.handSelectProject,
        clearable: true,
        showDisabled: this.typeLog != 'add',
        popupScroll: this.popupScroll,
        search: this.searchProject,
        showSearch: true,
        rules: [{ required: true, message: '请选择项目', trigger: 'blur' }]
      },
      inuseStatus: {
        label: '项目状态',
        el: 'select',
        placeholder: '请选择项目',
        options: [{value: '1', label: '在建'}, {value: '2', label: '完工'}, {value: '3', label: '装修'}],
        // callback: this.handSelectProject,
        showSearch: false,
        rules: [{ required: true, message: '请选择项目状态', trigger: 'blur' }]
      },
      areaId: {
        label: '所属区域',
        el: 'select',
        showSearch: true,
        options: this.deptAreaList,
        placeholder: '请选择所属区域',
        callback: this.handSelectAreId
      }
    }
  }
  get rowsProject () {
    return {
      relId: {
        label: '新增关联项目',
        el: 'select',
        // mode: 'multiple',
        placeholder: '请选择关联项目',
        options: this.ncProjectList,
        showSearch: true,
        clearable: true,
        callback: this.selectRowsProject,
        popupScroll: this.popupScroll,
        search: this.searchProject,
        rules: [{ required: true, message: '请选择关联项目', trigger: 'blur' }]
      }
    }
  }
  get rowsDept () {
    return {
      relId: {
        label: '选择请购部门',
        el: 'treeSelect2',
        mode: 'multiple',
        placeholder: '请选择请购部门',
        options: this.memberorgList,
        rules: [{ required: true, message: '请选择请购部门', trigger: 'blur' }],
        selectTreeData: this.selectTreeMemberOrg
      }
    }
  }
  get btns1 () {
    return [
      {
        label: '添加项目',
        callback: () => {
          this.formProjectVisible = true
            this.getRelProjectList()
        }

      }
    ]
  }
  get btns2 () {
    return [
      {
        label: '添加请购部门',
        callback: () => {
            this.formDeptVisible = true
            this.getRelDeptList()
        }

      }
    ]
  }
  get btns3 () {
    return [
      {
        label: '添加人员',
        callback: () => {
          this.formMemberVisible = true
            // this.formDeptVisible = true
            // this.getRelDeptList()
        }
      }
    ]
  }
  get rowsRole () {
    return {
      ids: {
        label: '角色配置',
        el: 'select',
        placeholder: '请选择角色',
        options: this.roleList,
        rules: [{ required: true, message: '请选择角色', trigger: 'blur' }]
      }
    }
  }
  get rowsCopy () {
    return {
      deptGroupId: {
        label: '项目组选择',
        el: 'select',
        placeholder: '请选择项目组',
        options: this.deprGroupList,
        rules: [{ required: true, message: '请选择项目组', trigger: 'blur' }]
      }
    }
  }
  pageConfig: any = {
    current: 1,
    total: 10,
    pageSize: 10,
    onChange: this.changePage
  }
  tableColumn: any = {
    code: {
      label: '项目编码'
    },
    ncProjectName: {
      label: '项目名称'
    },
    areaName: {
      label: '区域公司'
    },
    inuseStatus: {
      label: '项目状态',
      map: this.statusList
    },
    action: {
      label: '操作',
      width: 200,
      template: [
        {
          tag: 'a',
          text: '编辑',
          callback: (val:any) => {
            this.showEd(val)
            console.log(val, '===')
          }
        },
        {
          tag: 'a',
          text: '移出',
          confirmTxt: '是否确定删除该项目组',
          confirm: (val:any) => {
            this.delProject(val, 'PROJECT')
          }
        }
      ]
    }
  }
  tableColumn2: any = {
    orgCode: {
      label: '所属组织编码'
    },
    orgName: {
      label: '所属组织名称'
    },
    deptCode: {
      label: '请购部门编码'
    },
    deptName: {
      label: '请购部门名称'
    },
    action: {
      label: '操作',
      width: 200,
      template: [
        {
          tag: 'a',
          text: '移出',
          confirmTxt: '是否确定删除该项目组',
          confirm: (val:any) => {
            this.delProject(val, 'DEPT')
          }
        }
      ]
    }
  }
  tableColumn3: any = {
    userCode: {
      label: '用户编码'
    },
    memberAccount: {
      label: '账号名称'
    },
    memberName: {
      label: '姓名'
    },
    remark: {
      label: '角色'
    },
    email: {
      label: '所属部门'
    },
    statuss: {
      label: '状态',
      type: 'switch',
      callback: this.handleUpdateStatus,
      minWidth: 170
    },
    action: {
      label: '操作',
      width: 200,
      template: [
        // {
        //   tag: 'a',
        //   text: '编辑',
        //   confirm: (val:any) => {
        //     this.deleteGroup(val)
        //   }
        // },
        {
          tag: 'a',
          text: '移出项目组',
          confirmTxt: '是否确定删除该项目组',
          confirm: (val:any) => {
            this.delProject(val, 'MEMBER')
          }
        }
      ]
    }
  }
  Data: any[] = [];
  tableColumn4: any = {
    userCode: {
      label: '用户编码',
      minWidth: 120
    },
    account: {
      label: '账号名称',
      minWidth: 120
    },
    memberName: {
      label: '姓名',
      minWidth: 120
    },
    businessUnitName: {
      label: '所属部门',
      minWidth: 100
    }
  };
  hideFormCopyVisible () {
    this.formCopyVisible = false
    this.formCopy.deptGroupId = undefined
  }
  confirmformCopy () {
    let data = {
      ...this.formCopy,
      relIds: this.selectedRowKeysMember
    }
    this.$api.deptGroupCopyMemberFetch(data).then(res => {
      if (res.code == 0) {
        this.$message.success('操作成功');
        this.hideFormCopyVisible()
      }
    }).catch()
  }
  formDeleteRelsVisible () {
    this.formBatchRemovee = false
  }
  // 选择区域
  handSelectAreId (val:any) {
    this.form.areaName = this.deptAreaList.filter((item:any) => item.areaId == val)[0].areaName
  }
  // 批量删除
  confirmformDeleteRels () {
    let data = {
      deptGroupId: this.$route.query.deptGroupId,
      relIds: this.selectedRowKeysMember,
      relType: 'MEMBER'
    }
    this.$api.deptGroupDeleteRelsFetch(data).then(res => {
      if (res.code == 0) {
        this.$message.success('操作成功');
        this.formDeleteRelsVisible()
        this.getRelMemberList()
      }
    }).catch()
  }
  // 新增
  confirmHandle () {
    let data = {
      ...this.form
    }
    this.$api.projectAddOrUpdateNcProjectFetch(data).then((res:any) => {
      if (res.code == 0) {
        this.$message.success('操作成功');
        this.hideFormVisible()
        this.getRelProjectList()
      }
    }).catch()
  }
  // 获取项目组
  getDeprGroup () {
    let data = {
      page: 1,
      size: 9999
    }
    this.$api.deptGroupDeprGroupListFetch(data).then((res: any) => {
      if (res.code == 0) {
        res.data.records.map((item:any) => {
          item.label = item.deptGroupName
          item.value = item.deptGroupId
        })
        this.deprGroupList = res.data.records
      }
    }).catch()
  }
  // 选择批量
  handleMenuClick (val:any) {
    let key = val.key
    if (this.selectedRowKeysMember.length == 0) {
      return this.$message.error('请选择批量操作人员')
    }
    if (key == 1) {
      this.formRoleVisible = true
    } else if (key == 2) {
      this.formBatchRemovee = true
    } else {
      this.formCopyVisible = true
    }
  }
  // 角色列表
  getDownRole () {
    this.$api.memberDownRole2Fetch().then((res: any) => {
      this.roleList = res.data.map((item: any) => ({
        label: item.roleName,
        value: item.roleId
      }));
      console.log(this.roleList);
    });
  }
  confirmformRole () {
    let data = {
      ids: this.formRole.ids,
      memberIds: this.selectedRowKeysMember,
      type: 'role'
    }
    this.$api.memberBatchHandleFetch(data).then(res => {
      if (res.code == 0) {
        this.$message.success('操作成功');
        setTimeout(() => {
          this.hideFormRoleVisible()
          this.getRelMemberList()
        }, 1000);
      }
    }).catch()
  }
  changeTreePage (val:any) {
    this.current = val
    this.getOrgList()
  }
  onExpand (expandedKeys: any[]) {
    this.expandedKeys = expandedKeys;
    this.autoExpandParent = false;
  }
  onChange (e: any) {
    const value = e.target.value;
    this.word = value
    this.getOrgList()
  }
  onSelectChange (selectedRowKeys: string[], row: any) {
    this.selectedRowKeys = selectedRowKeys
  }
  onSelectChangeMember (selectedRowKeys: string[], row: any) {
    this.selectedRowKeysMember = selectedRowKeys
  }
  hideFormProjectMenber () {
    this.formMemberVisible = false
    // this.selectedRowKeys = []
  }
  // 获取区域公司列表
  getProjectDeptAreaFetch () {
    this.$api.projectDeptAreaFetch().then(res => {
      if (res.code == 0) {
        res.data.forEach((item:any) => {
          item.value = item.areaId
          item.label = item.areaName
        })
        this.deptAreaList = res.data
      }
    }).catch()
  }
  confirmformMenber () {
    if (this.selectedRowKeys.length == 0) {
      this.$message.error('请选择人员');
      return false
    }
    let data = {
      deptGroupId: this.$route.query.deptGroupId,
      relIds: [...new Set(this.selectedRowKeys)],
      relType: 'MEMBER'
    }
    this.$api.deptGroupAddRelFetch(data).then(res => {
      if (res.code == 0) {
        this.$message.success('操作成功');
        this.getRelMemberList()
        this.hideFormProjectMenber()
      }
    }).catch()
  }
  // 部门列表
  getOrgList () {
    let { word } = this
    let data = { word, page: this.current, size: 10 }
    this.$api.organizationListFetch(data).then((res: any) => {
      if (res.data) {
        this.treeData = res.data.records
        this.treeTotal = res.data.total
      } else {
        this.treeData = []
        this.treeTotal = 0
      }
    })
  }
  // 通过选择的id查询下一级人员
  getFindsID (list:any, id:any) {
    for (let i = 0; i < list.length; i++) {
      let itemList = list[i]
      if (itemList.id == id) {
        this.$api.organizationNextChlidFetch({id: id}).then(res => {
          if (res.data.length > 0) {
            itemList.childs = res.data
          }
        }).catch()
      } else {
        if (itemList.childs && itemList.childs.length > 0) {
          this.getFindsID(itemList.childs, id)
        }
      }
    }
  }
  // 搜索物料
  searchBtn (val:any) {
    this.getList()
  }
  getSearchForm () {
    let searchForm = JSON.parse(JSON.stringify(this.searchForm));
    let { date } = searchForm;
    let { current, pageSize } = this.pageConfig4
    let form = Object.assign(searchForm, {
      page: current,
      size: pageSize,
      startTime: (date && date[0]) || '',
      endTime: (date && date[1]) || '',
      businessUnitId: this.departId
    });

    console.log(form, '==')
    delete form.date;
    return form;
  }
  getList () {
    let data = this.getSearchForm()
    this.$api.memberListFetch(data).then((res: any) => {
      res.data.records.map((item:any) => {
        if (item.status == 1) {
          item.status = true
        } else {
          item.status = false
        }
      })
      this.Data = res.data.records;
      this.pageConfig4.total = res.data.total;
      if (!this.Data.length && this.pageConfig4.current > 1) {
        --this.pageConfig4.current;
        this.getList();
      }
    });
  }
  showEd (row:any) {
    this.formVisible = true
    this.form.projectId = row.ncProjectId
    this.form.inuseStatus = row.inuseStatus + ''
    this.form.areaId = row.areaId
    this.form.areaName = row.areaName
    this.projectList = [{label: row.ncProjectName, value: row.ncProjectId}]
  }
  // 关闭弹窗
  hideFormVisible () {
      this.formVisible = false
      this.form.projectId = undefined
      this.form.inuseStatus = undefined
      this.form.areaId = undefined
      this.form.areaName = ''
      this.projectList = []
  }
  // 选择树
  selectTree (selectedKeys: any) {
    console.log('选择树', selectedKeys)
    this.getFindsID(this.treeData, selectedKeys[0])
    this.departId = selectedKeys[0]
    this.getList()
  }
  hideFormProjectVisible () {
    this.formProject.relId = undefined
    this.formProjectVisible = false
    this.selectProjectList = []
  }
  hideFormDeptVisible () {
    this.formProject.relId = undefined
    this.formDeptVisible = false
    this.selectDeptList = []
  }
  confirmformDept () {
    let arr:any[] = []
    this.selectDeptList.forEach((item:any) => {
      arr.push(item.pkDept)
    })
    let data = {
      deptGroupId: this.$route.query.deptGroupId,
      relIds: arr,
      relType: 'DEPT'
    }
    this.$api.deptGroupAddRelFetch(data).then(res => {
      if (res.code == 0) {
        this.$message.success('操作成功');
        this.getRelDeptList()
        this.hideFormDeptVisible()
      }
    }).catch()
  }
  // 获取请购组织列表
  getMemberOrgList () {
    this.$api.memberMemberOrgListFetch().then(res => {
      if (res.code == 0) {
        res.data.map((item:any) => {
          item.id = item.orgCode
          item.name = item.orgName
          item.title = item.orgCode + item.orgName
          item.disabled = true
        })
        this.getMemberDeptList(res.data)
        this.memberorgList = res.data
      }
    }).catch()
  }
  // 获取请购部门列表
  getMemberDeptList (list:any) {
    list.forEach((item:any) => {
      let data = {
        orgCode: item.orgCode,
        name: ''
      }
      this.$api.memberMemberDeptListFetch(data).then(res => {
        if (res.code == 0) {
          res.data.map((kk:any) => {
            kk.id = kk.pkDept
            kk.name = kk.deptName
            kk.title = kk.pkDept + kk.deptName,
            kk.value = kk.pkDept
          })
          item.childs = res.data
        }
      }).catch()
    })
  }
  // 选择请购部门
  selectTreeMemberOrg (val:any) {
    let arr:any = []
    val.forEach((jj:any) => {
       this.memberorgList.forEach((item:any) => {
        item.childs.forEach((kk:any) => {
          if (kk.title == jj) {
            arr.push(kk)
          }
        })
      })
    })
    this.selectDeptList = this.selectDeptList.concat(arr)
    this.selectDeptList = this.objUnique(this.selectDeptList)
    console.log(this.selectDeptList, '====')
  }
  confirmformProject () {
    let arr:any[] = []
    this.selectProjectList.forEach((item:any) => {
      arr.push(item.ncProjectId)
    })
    let data = {
      deptGroupId: this.$route.query.deptGroupId,
      relIds: arr,
      relType: 'PROJECT'
    }
    console.log(data)
    this.$api.deptGroupAddRelFetch(data).then(res => {
      if (res.code == 0) {
        this.$message.success('操作成功');
        this.getRelProjectList()
        this.hideFormProjectVisible()
      }
    }).catch()
  }
  // 删除项目
  delProject (val:any, type:any) {
    let data = {
      deptGroupId: this.$route.query.deptGroupId,
      relType: type,
      relId: val.ncProjectId
    }
    if (type == 'PROJECT') {
      data.relId = val.ncProjectId
    } else if (type == 'DEPT') {
      data.relId = val.pkDept
    } else {
      data.relId = val.memberId
    }
    this.$api.deptGroupDeleteRelFetch(data).then(res => {
      if (res.code == 0) {
        this.$message.success('操作成功');
        if (type == 'PROJECT') {
          this.getRelProjectList()
        } else if (type == 'DEPT') {
          this.getRelDeptList()
        } else {
          this.selectedRowKeys = []
          this.getRelMemberList()
        }
      }
    }).catch()
    console.log(val)
  }
  changePage1 (val: number) {
    this.pageConfig1.current = val
    this.getRelProjectList()
  }
  changePage2 (val: number) {
    this.pageConfig2.current = val
    this.getRelDeptList()
  }
  changePage3 (val: number) {
    this.pageConfig3.current = val
    this.getRelMemberList()
  }
  changePage4 (val:number) {
    this.pageConfig4.current = val
    this.getList()
  }
  // 选择关联项目
  selectRowsProject (val:any) {
    this.searchValue = ''
    this.ncProjectList.forEach((item:any) => {
      if (item.ncProjectId == val) {
        this.selectProjectList.push(item)
      }
    })
    this.selectProjectList = this.objUnique(this.selectProjectList)
  }
  // 删除选择的项目项
  delSelectProject (index:any) {
    this.selectProjectList.splice(index, 1);
    // const tags = this.selectProjectList.filter(items => items.ncProjectId !== item.ncProjectId);
    // this.selectProjectList = tags
  }
  // 删除请购部门
  delSelectdept (index:any) {
  this.selectDeptList.splice(index, 1)
  }
  // 对象去重
  objUnique (obj:any) {
      const res = new Map();
      return obj.filter((item:any) => !res.has(item.value) && res.set(item.value, 1))
  }
  // 获取关联的项目列表
  getRelProjectList () {
    let data = {
      deptGroupId: this.$route.query.deptGroupId,
      page: this.pageConfig1.current,
      size: this.pageConfig1.pageSize
    }
    this.$api.deptGroupRelProjectListFetch(data).then(res => {
      res.data.records.map((item:any) => {
        item.value = item.ncProjectId
      })
      this.Data1 = res.data.records
      this.selectProjectList = JSON.parse(JSON.stringify(res.data.records));
      this.pageConfig1.total = res.data.total
      if (!this.Data1.length && this.pageConfig1.current > 1) {
        --this.pageConfig1.current
        this.getRelProjectList()
      }
    }).catch()
  }
  // 获取关联的部门
  getRelDeptList () {
    let data = {
      deptGroupId: this.$route.query.deptGroupId,
      page: this.pageConfig2.current,
      size: this.pageConfig2.pageSize
    }
    this.$api.deptGroupRelDeptListFetch(data).then(res => {
      res.data.records.map((item:any) => {
        item.value = item.pkDept
        item.title = item.deptName + item.pkDept
      })
      this.Data2 = res.data.records
      this.selectDeptList = JSON.parse(JSON.stringify(res.data.records));
      this.pageConfig2.total = res.data.total
      if (!this.Data2.length && this.pageConfig2.current > 1) {
        --this.pageConfig2.current
        this.getRelDeptList()
      }
    }).catch()
  }
  // 获取关联的人员列表
  getRelMemberList () {
    let arr:any = []
    let data = {
      deptGroupId: this.$route.query.deptGroupId,
      page: this.pageConfig3.current,
      size: this.pageConfig3.pageSize
    }
    this.$api.deptGroupRelMemberListFetch(data).then(res => {
      res.data.records.map((item:any) => {
        arr.push(item.memberId)

        if (item.statuss == 1) {
          item.statuss = true
        } else {
          item.statuss = false
        }
      })

      this.selectedRowKeys = arr
      this.Data3 = res.data.records
      // this.selectProjectList = JSON.parse(JSON.stringify(res.data.records));
      this.pageConfig3.total = res.data.total
      if (!this.Data3.length && this.pageConfig3.current > 1) {
        --this.pageConfig3.current
        this.getRelMemberList()
      }
    }).catch()
  }
  searchProject (val:any) {
    this.searchValue = val
    this.ncProjectList = []
    this.getNcProjectList()
  }
  // 滚动选择框时执行
  popupScroll (e:any) {
    const { scrollHeight, scrollTop, clientHeight } = e.target
      if (Math.floor(scrollHeight - scrollTop) === clientHeight) {
        this.currentPage++
        this.getProjects()
      }
  }
  // 获取配置项目列表
  getNcProjectList () {
    let data = {
      page: this.currentPage,
      size: 100,
      searchValue: this.searchValue
    }
    // this.$api.projectRoleProjectListFetch(data).then((res: any) => {
    //   let projects = this.projects.concat(res.data.records.map((item: any) => ({label: item.ncProjectName, value: item.ncProjectId + '-' + item.ncProjectName, pkOrg: item.pkOrg})))
    //   this.projects = projects
    // })
    this.$api.projectRoleProjectListFetch(data).then(res => {
      if (res.code == 0) {
        res.data.records.map((item:any) => {
          item.label = item.ncProjectName
          item.value = item.ncProjectId
        })
        let ncProjectList = this.ncProjectList.concat(res.data.records)
        this.ncProjectList = ncProjectList
      }
    }).catch()
  }
  // 获取管理数据
  getDeptGroupDetail () {
    this.$api.deptGroupDeptGroupDetailFetch({deptGroupId: this.$route.query.deptGroupId}).then(res => {
      if (res.code == 0) {
        this.groupDetail = res.data
      }
    }).catch()
  }
  async handleUpdateStatus (row: any, index: number) {
    let statuss = 0
    let { memberId } = row;
    if (row.statuss) {
      statuss = 1
    } else {
      statuss = 0
    }
    this.$api
      .memberStatusFetch({ adminId: memberId, status: statuss })
      .then((res: any) => {
        this.$message.success(`${status ? '启用' : '禁用'}成功`);
        this.getRelMemberList();
      });
  }
  init () {
    this.getRelDeptList()
    this.getRelProjectList()
    this.getRelMemberList()
    this.getDeptGroupDetail()
    this.getMemberOrgList()
    this.getNcProjectList()
    this.getList()
    this.getOrgList()
    this.getDownRole()
    this.getDeprGroup()
    this.getProjectDeptAreaFetch()
  }
}
</script>
<style lang='scss' scoped>
#projectTeamDetails{
  margin: 0 20px;
  .projectTeam_title{
    background: #fff;
    padding: 20px;
    margin-bottom: 20px;
    .form_item{
      display: flex;
      align-items: center;
      margin-bottom: 10px;
      div{
        width: 100px;
        text-align: right;
      }
    }
  }
  .projectTeam_content{
    padding: 20px;
    background: #fff;
    .ant-tabs-content{
      min-height: 350px !important;
    }
  }

}
.commonBlock_item{
  display: inline-block;
  font-size: 12px;
  border: 1px solid #ccc;
  padding: 4px 10px;
  border-radius: 4px;
  margin-right: 10px;
  position: relative;
  margin-bottom: 6px;
}
.dialog-wrap{
    width: 100%;
    display: flex;
    justify-content: space-between;
    height: 500px;
    .dialog-left{
        width: 20%;
        border: 1px solid #bbbbbb;
        overflow: auto;
    }
    .dialog-right{
        width: 80%;
        height: 100%;
        overflow: auto;
        padding-left: 20px;
    }
}
</style>
